<template>
  <div class="sort-tabs">
    <div
      :class="['tab', { active: activeValue === tab.id }]"
      v-for="tab in tabs"
      :key="tab.id"
      @click="handleTabClick(tab.id)"
    >
      <i :class="tab.icon" class="tab-icon"></i>
      {{ tab.name }}
    </div>
  </div>
</template>

<script setup>
defineProps({
  activeValue: {
    type: String,
    default: 'time'
  }
})

const emit = defineEmits(['tab-change'])

const tabs = [
  { id: 'time', name: '时间排序', icon: 'fa fa-sort-amount-down' },
  { id: 'views', name: '热度排序', icon: 'fa fa-fire' },
  { id: 'comments', name: '评论排序', icon: 'fa fa-comment' },
]

const handleTabClick = (tabId) => {
  emit('tab-change', tabId)
}
</script>

<style scoped>
.sort-tabs {
  display: flex;
  gap: 20px;
  padding: 10px;
  flex-wrap: wrap;
}

.tab {
  cursor: pointer;
  font-weight: bold;
  color: var(--article-order-title-color,#666);
  display: flex;
  align-items: center;
}

.tab-icon {
  margin-right: 8px;
}

.tab.active {
  color:var(--article-order-active-color, #5fb878);
  position: relative;
}

.tab.active::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--article-order-active-bg-color, #5fb878);
  bottom: -2px;
  left: 0;
}
</style>
